<template>
  <div style="display: flex">
    <!--对象属性: ref和reactive。-->
    <div style="margin-right: 50px">
      用户1：{{ user.name }} -- {{ user.age }} -- {{ user.address.city }} <br />
      <button @click="changeUser">切换用户</button>
      <br />
      <button @click="changeUserName">切换用户姓名</button>
      <br />
      <button @click="changeUserCity">切换用户city</button>
      <br />
      <button @click="changeUserAddress">切换用户地址</button>
      <br />
      <br />
    </div>
    <div>
      用户2 reactive：{{ user2.name }} -- {{ user2.age }} -- {{ user2.address.city }} <br />
      <button @click="changeUser2">切换用户2</button>
      <br />
      <button @click="changeUserName2">切换用户姓名2</button>
      <br />
      <button @click="changeUserCity2">切换用户city2</button>
      <br />
      <button @click="changeUserAddress2">切换用户地址2</button>
      <br />
      <br />
    </div>
  </div>
</template>
<script setup lang="ts">
// import { reactive, ref, watch } from 'vue'

const user = ref({
  name: '张三',
  age: 18,
  address: {
    city: '北京',
  },
})
const user2 = reactive({
  name: '张三',
  age: 18,
  address: {
    city: '北京',
  },
})
const changeUser = () => {
  user.value = {
    name: '李四',
    age: 20,
    address: {
      city: '上海',
    },
  }
}
const changeUserName = () => {
  user.value.name += '~'
}
const changeUserCity = () => {
  user.value.address.city += '~'
}
const changeUserAddress = () => {
  user.value.address = {
    city: '上海 啊',
  }
}

const changeUser2 = () => {
  Object.assign(user2, {
    name: '李四',
    age: 20,
    address: {
      city: '上海',
    },
  })
}
const changeUserName2 = () => {
  user2.name += '~'
}
const changeUserCity2 = () => {
  user2.address.city += '~'
}
const changeUserAddress2 = () => {
  user2.address = {
    city: '上海 啊',
  }
}
// 监视ref的对象属性：
const stopWatch = watch(
  // () => user.value.name, // 返回：基本类型。 直接触发。
  () => user.value.address, // 返回：对象类型，监听的是地址。1. 对象整体改变可以触发；2. 对象内部属性改变，不触发。（除非加上deep）
  (newVal, oldVal) => {
    console.log('watch-ref对象类型1 - 非deep：', newVal, oldVal)
  },
  // {deep:true}
)

// 监视reactive的对象属性：
const stopWatch2 = watch(
  // ()=> user2.name, // 返回：基本类型。 直接触发。
  () => user2.address, // 返回：对象类型，监听的是地址。1. 对象整体改变可以触发；2. 对象内部属性改变，不触发。（除非加上deep）
  (newVal, oldVal) => {
    console.log('watch-reactive的属性 2：', newVal, oldVal)
  },
)
</script>
<style scoped></style>
